<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <div class="container">
            <div>这个是一个进行对比的盒子呢,
                <span>这个会出现一些方块边缘的问题呢</span>,这样不是特别好看
            </div>
            <div>
                这个是一个效果的盒子呢,<span>这个会解决一下出现边缘问题的呢</span>,这样看起来会好看一些
            </div>
        </div>
        <style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }

            body {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100vw;
                height: 100vh;
            }

            .container {
                width: 200px;
                height: 200px;
                margin: auto;
                line-height: 1.6;
            }

            .container>div {
                overflow: hidden;
                margin-bottom: 20px;
            }

            .container>div:nth-child(2)>span {
                box-decoration-break: clone;
                -webkit-box-direction-break: clone;
                /* 封闭间断,默认是slice */
            }

            .container>div>span {
                background: linear-gradient(45deg, #19be6b, #5cadff, #2db7f5);
                border-radius: 5px;
            }
        </style>
        <script>

        </script>
    </body>

</html>